<template>
	<div class="menu-preview">
	  <!-- 竖向 -->
	  <el-scrollbar wrap-class="scrollbar-wrapper">
		<el-menu :default-openeds="[]" :unique-opened="true" class="el-menu-vertical-demo" default-active="0" background-color="#fff" text-color="#808080" active-text-color="#000" :style="{'border': 0, 'padding': '0 0 10px', 'listStyle': 'none', 'margin': 0, 'position': 'relative'}">
		  
		  <!-- 头像 -->
		  <el-image v-if="false" :style="{'width': '44px', 'margin': '10px auto', 'objectFit': 'cover', 'borderRadius': '100%', 'display': 'block', 'height': '44px'}" src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg" fit="cover"></el-image>
		  
		  <!-- 主页菜单项 -->
		  <el-submenu index="0">
			<template slot="title">
			  <i v-if="false" :style="{'width': '34px', 'verticalAlign': 'middle', 'margin': '0 3px', 'fontSize': '18px', 'color': 'inherit', 'textAlign': 'center'}" class="el-icon-menu el-icon-s-home"></i>
			  <span :style="{'color': 'inherit', 'verticalAlign': 'middle', 'fontSize': '14px'}">系统首页</span>
			</template>
		  </el-submenu>
		  
		  <!-- 个人中心 -->
		  <el-submenu index="1">
			<template slot="title">
			  <i v-if="false" :style="{'width': '34px', 'verticalAlign': 'middle', 'margin': '0 3px', 'fontSize': '18px', 'color': 'inherit', 'textAlign': 'center'}" class="el-icon-menu el-icon-user-solid"></i>
			  <span :style="{'color': 'inherit', 'verticalAlign': 'middle', 'fontSize': '14px'}">个人中心</span>
			</template>
			<el-menu-item index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
			<el-menu-item index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
		  </el-submenu>
  
		  <!-- 动态菜单 -->
		  <el-submenu v-for="(menu, index) in menuList.backMenu" :key="menu.menu" :index="index + 2 + ''">
			<template slot="title">
			  <i v-if="false" :style="{'width': '34px', 'verticalAlign': 'middle', 'margin': '0 3px', 'fontSize': '18px', 'color': 'inherit', 'textAlign': 'center'}" :class="icons[index]"></i>
			  <span :style="{'color': 'inherit', 'verticalAlign': 'middle', 'fontSize': '14px'}">{{ menu.menu }}</span>
			</template>
			<el-menu-item v-for="(child, sort) in menu.child" :key="sort" :index="index + 2 + '-' + sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
		  </el-submenu>
  
		</el-menu>
	  </el-scrollbar>
	</div>
  </template>
  
  <script>
  import menu from '@/utils/menu'
  export default {
	data() {
	  return {
		menuList: [],
		dynamicMenuRoutes: [],
		role: '',
		icons: [
		  'el-icon-s-cooperation', 'el-icon-s-order', 'el-icon-s-platform', 'el-icon-s-fold', 'el-icon-s-unfold', 'el-icon-s-operation',
		  'el-icon-s-promotion', 'el-icon-s-release', 'el-icon-s-ticket', 'el-icon-s-management', 'el-icon-s-open', 'el-icon-s-shop',
		  'el-icon-s-marketing', 'el-icon-s-flag', 'el-icon-s-comment', 'el-icon-s-finance', 'el-icon-s-claim', 'el-icon-s-custom',
		  'el-icon-s-opportunity', 'el-icon-s-data', 'el-icon-s-check', 'el-icon-s-grid', 'el-icon-menu', 'el-icon-chat-dot-square',
		  'el-icon-message', 'el-icon-postcard', 'el-icon-position', 'el-icon-microphone', 'el-icon-close-notification', 'el-icon-bangzhu',
		  'el-icon-time', 'el-icon-odometer', 'el-icon-crop', 'el-icon-aim', 'el-icon-switch-button', 'el-icon-full-screen',
		  'el-icon-copy-document', 'el-icon-mic', 'el-icon-stopwatch'
		],
		menulistBorderBottom: {},
	  }
	},
	mounted() {
	  const menus = menu.list()
	  if (menus) {
		this.menuList = menus
	  } else {
		let params = {
		  page: 1,
		  limit: 1,
		  sort: 'id',
		}
  
		this.$http({
		  url: "menu/list",
		  method: "get",
		  params: params
		}).then(({ data }) => {
		  if (data && data.code === 0) {
			this.menuList = JSON.parse(data.data.list[0].menujson);
			this.$storage.set("menus", this.menuList);
		  }
		})
	  }
	  this.role = this.$storage.get('role')
  
	  for (let i = 0; i < this.menuList.length; i++) {
		if (this.menuList[i].roleName == this.role) {
		  this.menuList = this.menuList[i];
		  break;
		}
	  }
	  this.styleChange()
	},
	created() {
	  this.icons.sort(() => {
		return (0.5 - Math.random())
	  })
	},
	methods: {
	  styleChange() {
		this.$nextTick(() => {
		  document.querySelectorAll('.el-menu-vertical-demo .el-submenu .el-menu').forEach(el => {
			el.removeAttribute('style')
			const icon = { "border": "none", "display": "none" }
			Object.keys(icon).forEach((key) => {
			  el.style[key] = icon[key]
			})
		  })
		})
	  },
	  menuHandler(name) {
		let router = this.$router
		name = '/' + name
		router.push(name)
	  },
	}
  }
  </script>
  
  <style lang="scss" scoped>
	.menu-preview {
	  .el-scrollbar {
		height: 100%;
		& /deep/ .scrollbar-wrapper {
		  overflow-x: hidden;
		}
  
		.el-menu-vertical-demo {
		  .el-submenu:first-of-type /deep/ .el-submenu__title .el-submenu__icon-arrow {
			display: none;
		  }
  
		  .el-menu-vertical-demo>.el-menu-item {
			cursor: pointer;
			background-color: #fff;
			padding: 0 20px;
			color: rgba(128, 128, 128, 1);
			background-image: url(http://codegen.caihongy.cn/20220726/3bfc79d51460428ca5b1e6b0bdd7f4a8.png);
			position: relative;
		  }
  
		  .el-menu-vertical-demo>.el-menu-item:hover {
			color: rgba(0, 0, 0, 1);
			background: url(http://codegen.caihongy.cn/20220726/b84a67edae8f479c8a08f44e14f36f96.png);
		  }
  
		  .el-menu-vertical-demo .el-submenu /deep/ .el-submenu__title {
			cursor: pointer;
			background-color: #fff;
			padding: 0 20px;
			color: rgba(128, 128, 128, 1);
			background-image: url(http://codegen.caihongy.cn/20220726/3bfc79d51460428ca5b1e6b0bdd7f4a8.png);
			position: relative;
		  }
  
		  .el-menu-vertical-demo .el-submenu /deep/ .el-submenu__title:hover {
			color: rgba(0, 0, 0, 1);
			background: url(http://codegen.caihongy.cn/20220726/b84a67edae8f479c8a08f44e14f36f96.png);
		  }
  
		  .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item {
			padding: 0 40px;
			margin: 0 0 2px 0;
			color: #666;
			background: rgba(243, 240, 239, 1);
			line-height: 50px;
			height: 50px;
		  }
  
		  .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item:hover {
			color: #000;
			background: #cfdfee;
		  }
  
		  .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item.is-active {
			color: #000;
			background: #cfdfee;
		  }
		}
	  }
	}
  </style>
  